<template>
    <div class="box">
      <img class="bg" src="../assets/login-register/login_bg.png" alt="">
        <div class="login-register_nva">
            <div class="login" @click="phone_login">手机号登录</div>
            <div class="register" @click="register">注册</div>
            <div class="use">
              <span @click="home">
                <a href="#">游客试用</a>
              </span>
            </div>
        </div>


      <v-other></v-other>
    </div>
</template>

<script>
  import other from '@/components/other'

     export default {
          name: "login",
       data(){
            return{

            }
       },
       methods:{

         phone_login(){
              this.$router.push({ name: 'phone_login' });
            },
         register(){
           this.$router.push({ name: 'register' });
         },
         home(){
           this.$router.push({ name: 'Home' });
         }

       },
       components:{
            'v-other': other,
       }
     }
</script>

<style scoped>
  .box{
    width: 100vw;
    height: 100vh;
    position: relative;
    background: #F7F6F6;
  }
  .box .bg{
    width: inherit;
    height: inherit;
  }
  .login-register_nva{
    width: 100%;
    height: 200px;
    position: absolute;
    top: 250px;
  }
  .login{
    width: 80%;
    height: 40px;
    border: 2px solid #e18078;
    color: #ef7d68;
    border-radius: 45px;
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
  }
  .register{
    width: 80%;
    height: 40px;
    border: 2px solid #e18078;
    color: #ef7d68;
    border-radius: 45px;
    margin: 20px auto;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
  }
  .use{
    width: 80%;
    height: 40px;
    margin: -10px auto;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
  }
  .use span{
    width: 62px;
    height: 32px;
    font-size: 15px;
    border-bottom: 2px solid #a7a6a6;
    text-align: center;
    line-height: 40px;
    display: inline-block;
  }
  a{
    color: #7d7c7c;
  }



</style>
